<template>
  <div style="width: 100%; height: 330px; background: rgb(34, 34, 34)">
    <ul style="
                display: flex;
                color: white;
                justify-content: space-evenly;
                margin: 20px 0;
              ">
      <li v-for="i in footerList" :key="i.id" style="margin-top: 100px">
        <strong style="font-size: 24px">{{ i.title }}</strong>
        <div v-for="(i, index) in i.url" :key="index" style="margin-top: 20px; font-size: 18px; color: #ccc;cursor: pointer;">
          {{ i }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        footerList: [{
            id: 0,
            title: "友情链接",
            url: ["中国温岭"],
          },
          {
            id: 1,
            title: "著名景点",
            url: ["后岭花开嬉栖谷", "七彩小箬村"],
          },
          {
            id: 2,
            title: "合作机构",
            url: ["温岭市政府"],
          },
          {
            id: 3,
            title: "关于我们",
            url: ["联系我们", "帮助中心"],
          },
        ],
      }
    }
  }

</script>

<style>

</style>
